import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  NavBar,
  List,
  Switch,
  Toast,
  Button,
  Dialog
} from 'antd-mobile';
import { useTheme } from '../../theme/ThemeContext';
import './Settings.css';

const Settings = () => {
  const navigate = useNavigate();
  const { isDarkMode, toggleDarkMode } = useTheme();
  const [settings, setSettings] = useState({
    notifications: true,
    darkMode: isDarkMode,
    autoLogin: true,
    saveHistory: true,
    clearCache: false
  });
  
  // 加载设置
  useEffect(() => {
    const savedSettings = localStorage.getItem('userSettings');
    if (savedSettings) {
      const parsedSettings = JSON.parse(savedSettings);
      setSettings({
        ...parsedSettings,
        darkMode: isDarkMode // 使用ThemeContext中的值
      });
    }
  }, [isDarkMode]);
  
  // 保存设置
  const saveSettings = (newSettings) => {
    const updatedSettings = { ...settings, ...newSettings };
    setSettings(updatedSettings);
    localStorage.setItem('userSettings', JSON.stringify(updatedSettings));
  };

  // 返回上一页
  const back = () => {
    navigate(-1);
  };
  
  // 切换设置项
  const toggleSetting = (key) => {
    if (key === 'darkMode') {
      toggleDarkMode(); // 使用ThemeContext的切换方法
      return;
    }
    
    saveSettings({ [key]: !settings[key] });
    
    if (key === 'clearCache' && !settings[key]) {
      Toast.show({
        icon: 'success',
        content: '缓存已清除',
      });
      // 重置为false
      setTimeout(() => {
        saveSettings({ clearCache: false });
      }, 500);
    }
  };
  
  // 退出登录
  const handleLogout = () => {
    Dialog.confirm({
      content: '确定要退出登录吗？',
      onConfirm: () => {
        localStorage.removeItem('userInfo');
        Toast.show({
          icon: 'success',
          content: '已退出登录',
        });
        navigate('/login');
      },
    });
  };

  return (
    <div className="settings-page">
      <NavBar onBack={back}>设置</NavBar>
      
      <div className="settings-container">
        <List header="通用设置">
          <List.Item
            extra={
              <Switch
                checked={settings.notifications}
                onChange={() => toggleSetting('notifications')}
              />
            }
          >
            推送通知
          </List.Item>
          <List.Item
            extra={
              <Switch
                checked={isDarkMode}
                onChange={() => toggleSetting('darkMode')}
              />
            }
          >
            深色模式
          </List.Item>
          <List.Item
            extra={
              <Switch
                checked={settings.autoLogin}
                onChange={() => toggleSetting('autoLogin')}
              />
            }
          >
            自动登录
          </List.Item>
        </List>
        
        <List header="隐私设置" style={{ marginTop: '16px' }}>
          <List.Item
            extra={
              <Switch
                checked={settings.saveHistory}
                onChange={() => toggleSetting('saveHistory')}
              />
            }
          >
            保存浏览历史
          </List.Item>
          <List.Item
            extra={
              <Switch
                checked={settings.clearCache}
                onChange={() => toggleSetting('clearCache')}
              />
            }
          >
            清除缓存
          </List.Item>
        </List>
        
        <List header="账号设置" style={{ marginTop: '16px' }}>
          <List.Item onClick={() => navigate('/account')}>
            修改个人信息
          </List.Item>
          <List.Item onClick={() => navigate('/address')}>
            管理收货地址
          </List.Item>
        </List>
        
        <div className="logout-button-container">
          <Button block color="danger" onClick={handleLogout}>
            退出登录
          </Button>
        </div>
      </div>
    </div>
  );
};

export default Settings; 